import 'package:flutter/material.dart';
import 'package:flutter_eve_plugin/model/health/sys_health_property.dart';
import 'package:flutter_eve_plugin/store/main.dart';
import 'package:flutter_eve_plugin/store_vm/app_vm.dart';
import 'package:flutter_eve_plugin/utils/image_util.dart';
import 'package:flutter_eve_plugin/utils/screen_util.dart';
import 'package:flutter_redux/flutter_redux.dart';

class ProgressChartWidget extends StatelessWidget {
  final PropertyHealthDataInfo info;

  const ProgressChartWidget({Key key, this.info}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, AppStateViewModel>(
        converter: (store) => AppStateViewModel(state: store.state),
        builder: (context, vm) {
          int progressValue = progress();
          return Container(
            margin: EdgeInsets.only(
                left: setRatio(15), right: setRatio(15), top: setRatio(5)),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                buildRichText(),
                Container(
                    width: setRatio(30),
                    height: setRatio(34),
                    margin: EdgeInsets.only(
                        left: buildSetRatio(345, progressValue, 25)),
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: buildAssetImageCali(),
                        alignment: Alignment.topCenter,
                        fit: BoxFit.cover,
                      ),
                    ),
                    child: Center(
                        child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        Text(
                          info.healthGrade <= 1
                              ? '$progressValue'
                              : '${progressValue * 5}',
                          style: TextStyle(
                              color: Color(0xFFFFFFFF),
                              fontSize: setTextSp(10)),
                        ),
                        SizedBox(
                          height: setRatio(5),
                        )
                      ],
                    ))),
                SizedBox(
                  height: setRatio(3),
                ),
                Stack(
                  overflow: Overflow.visible,
                  children: <Widget>[
                    Container(
                      width: setRatio(345),
                      height: setRatio(17),
                      decoration: BoxDecoration(
                        image: DecorationImage(
                          image: buildAssetImageBg(),
                          alignment: Alignment.centerLeft,
                          fit: BoxFit.fitWidth,
                        ),
                      ),
                    ),
                    buildForegroudWidget(progressValue),
                    buildForegroudMaskWidget(progressValue),
                    Positioned(
                      top: setRatio(-10),
                      left: progressValue <= 0 ? setRatio(-3) : 0,
                      child: Container(
                        width: setRatio(34),
                        height: setRatio(34),
                        margin: EdgeInsets.only(
                            left: buildSetRatio(345, progressValue, 25)),
                        decoration: BoxDecoration(
                          image: DecorationImage(
                            image: buildAssetImagePoint(),
                            alignment: Alignment.topCenter,
                            fit: BoxFit.cover,
                          ),
                        ),
                      ),
                    )
                  ],
                ),
                SizedBox(
                  height: setRatio(3),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      '0',
                      style: TextStyle(
                          color: info.healthGrade <= 1
                              ? Color(0xFFFB9C14)
                              : Color(0xFFFF4B52),
                          fontSize: setTextSp(13)),
                    ),
                    info.healthGrade <= 1
                        ? Container(
                            width: setRatio(50),
                            height: setRatio(17),
                            margin: EdgeInsets.only(
                                left:
                                    buildSetRatio(345, 70, 28) - setRatio(40)),
                            child: Text(
                              "70%",
                              style: TextStyle(color: Color(0xFFFB9C14)),
                            ),
                          )
                        : Container(),
                    Text(
                      info.healthGrade <= 1 ? '100%' : "500",
                      style: TextStyle(
                          color: info.healthGrade <= 1
                              ? Color(0xFF887FFF)
                              : Color(0xFFFF4B52),
                          fontSize: setTextSp(13)),
                    )
                  ],
                )
              ],
            ),
          );
        });
  }

  double buildSetRatio(int max, int progressValue, int correction) {
    if ((max * progressValue / 100 - correction).ceil() <= 0) {
      return 0.0;
    }
    return setRatio(max * progressValue / 100 - correction);
  }

  Widget buildForegroudWidget(int progressValue) {
    return Container(
      width: buildSetRatio(345, progressValue, 17),
      height: setRatio(17),
      decoration: BoxDecoration(
        image: DecorationImage(
          image: buildAssetImage(),
          alignment: Alignment.centerLeft,
          fit: BoxFit.fitHeight,
        ),
      ),
    );
  }

  Widget buildForegroudMaskWidget(int progressValue) {
    return info.healthGrade > 1
        ? Container()
        : Container(
            width: buildSetRatio(345, progressValue, 17),
            height: setRatio(17),
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage(
                    imageUtilHuPo('health/icon_easy_sick_prospects@2x')),
                alignment: Alignment.centerLeft,
                fit: BoxFit.fitHeight,
              ),
            ),
          );
  }

  ///刻度背景
  AssetImage buildAssetImageCali() {
    switch (info.healthGrade) {
      case 0:
        return AssetImage(
            imageUtilHuPo('health/icon_health_curr_calibration@2x'));
      case 1:
        return AssetImage(
            imageUtilHuPo('health/icon_easy_sick_curr_calibration@2x'));
      case 2:
      case 3:
        return AssetImage(
            imageUtilHuPo('health/icon_sick_curr_calibration@2x'));
      default:
        return AssetImage(
            imageUtilHuPo('health/icon_health_curr_calibration@2x'));
    }
  }

  ///骷髅头或者爱心
  AssetImage buildAssetImagePoint() {
    switch (info.healthGrade) {
      case 0:
        return AssetImage(
            imageUtilHuPo('health/icon_health_curr_calibration_point@2x'));
      case 1:
        return AssetImage(
            imageUtilHuPo('health/icon_easy_sick_curr_calibration_point@2x'));
      case 2:
      case 3:
        return AssetImage(
            imageUtilHuPo('health/icon_sick_curr_calibration_point@2x'));
      default:
        return AssetImage(
            imageUtilHuPo('health/icon_health_curr_calibration_point@2x'));
    }
  }

  ///进度前景色
  AssetImage buildAssetImage() {
    switch (info.healthGrade) {
      case 0:
      case 1:
        return AssetImage(imageUtilHuPo('health/icon_health_prospects@2x'));
      case 2:
      case 3:
        return AssetImage(imageUtilHuPo('health/icon_sick_prospects@2x'));
      default:
        return AssetImage(imageUtilHuPo('health/icon_health_prospects@2x'));
    }
  }

  ///进度背景色
  AssetImage buildAssetImageBg() {
    switch (info.healthGrade) {
      case 0:
      case 1:
        return AssetImage(imageUtilHuPo('health/icon_health_background@2x'));
      case 2:
      case 3:
        return AssetImage(imageUtilHuPo('health/icon_sick_background@2x'));
      default:
        return AssetImage(imageUtilHuPo('health/icon_health_background@2x'));
    }
  }

  int progress() {
    int progress = 0;
    switch (info.healthGrade) {
      case 0:
      case 1:
        {
          progress = (info.value / 10).ceil();
        }
        break;
      case 2:
      case 3:
        {
          progress = (info.illValue / 5).ceil();
        }
        break;
    }
    return progress;
  }

  RichText buildRichText() {
    if (info.healthGrade == 0) {
      return RichText(
        text: TextSpan(
            text: '健康值',
            style: TextStyle(color: Color(0xFF7975FF), fontSize: setTextSp(15)),
            children: [
              TextSpan(
                text: '检测',
                style: TextStyle(
                    color: Color(0xFF999999), fontSize: setTextSp(15)),
              ),
              TextSpan(
                text: '：(健康值越高越不容易生病哦~）',
                style: TextStyle(
                    color: Color(0xFF999999), fontSize: setTextSp(14)),
              )
            ]),
      );
    } else if (info.healthGrade == 1) {
      return RichText(
        text: TextSpan(
            text: '健康值',
            style: TextStyle(color: Color(0xFFFB9C14), fontSize: setTextSp(15)),
            children: [
              TextSpan(
                text: '检测',
                style: TextStyle(
                    color: Color(0xFF999999), fontSize: setTextSp(15)),
              ),
              TextSpan(
                text: '：(健康值越高越不容易生病哦~）',
                style: TextStyle(
                    color: Color(0xFF999999), fontSize: setTextSp(14)),
              )
            ]),
      );
    } else {
      return RichText(
        text: TextSpan(
            text: '疾病值',
            style: TextStyle(color: Color(0xFFF73E3E), fontSize: setTextSp(15)),
            children: [
              TextSpan(
                text: '检测',
                style: TextStyle(
                    color: Color(0xFF999999), fontSize: setTextSp(15)),
              ),
              TextSpan(
                text: '：(消除疾病值才能痊愈哦~）',
                style: TextStyle(
                    color: Color(0xFF999999), fontSize: setTextSp(14)),
              )
            ]),
      );
    }
  }
}
